<template>
  <div class="config-font">
    <div class="common-title" v-if="useingInfo.font_name">当前使用：</div>
    <div class="item using-item" v-if="useingInfo.font_name">
      <div class="font-name">{{ useingInfo.font_name}}</div>
      <div class="item-bottom">
        <div class="font-img" :style="{'backgroundImage': 'url(' + useingInfo.font_image + ')'}">
        </div>
        <span class="using">正在使用</span>
      </div>
    </div>
    <div class="common-title">全部字体：</div>
    <div class="item" v-for="(item, index) in fontList" :key="index">
      <div class="font-name">{{ item.font_name }}</div>
      <div class="item-bottom">
        <div class="font-img" :style="{'backgroundImage': 'url(' + item.font_image + ')'}"></div>
        <span class="use-btn" @click="userFont(item, index)">使用</span>
      </div>
    </div>
  </div>
</template>

<script>
import { updatePersonParam, listPreferenceFont, findPersonParam } from '@/api/account'
// TODO 设置字体的图片，更新成功后，设置useingInfo
export default {
  data () {
    return {
      useingInfo: {}, // 正在使用哪个字体
      fontList: [],
      currentFontKey: '',
    }
  },
  mounted () {
    findPersonParam().then(res => {
      console.log('垃圾酸辣粉：', res)
      this.currentFontKey = res.font_key
    })
    this.getFontList()
  },
  methods: {
    getFontList () {
      listPreferenceFont().then(res => {
        console.log('font list:', res)
        if (this.currentFontKey) {
          res.forEach(item => {
            if (this.currentFontKey === item.font_key) {
              this.useingInfo = item
            }
          })
        }
        this.fontList = res
      })
    },
    // 设置字体
    userFont(item, index) {
      console.log('item:', item)
      updatePersonParam({
        font_key: item.font_key
      }).then(res => {
        console.log('设置成功')
        this.fontList.forEach(i => {
          if (item.font_key === i.font_key) {
            this.useingInfo = i
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.use-btn {
  width: 14.4vw;
  height: 6.93vw;
  text-align: center;
  line-height: 6.93vw;
  border-radius: 1.07vw;
  background: #006EDD;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #FFFFFF;
}
.using {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  line-height: 5.87vw;
  color: #006EDD;
}
.font-img {
  flex: 1;
  height: 10.67vw;
  width: auto;
  max-width: 66.67vw;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.font-name {
  margin-bottom: 2.4vw;
  padding-left: 3.2vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #999999;
}
.common-title {
  margin-bottom: 2.13vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  line-height: 5.87vw;
  color: #3D3D3D;
}
.config-font {
  box-sizing: border-box;
  padding: 5.33vw 5.33vw 0;
}
.item {
  height: 22.4vw;
  box-sizing: border-box;
  padding-top: 1.07vw;
  background: #ffffff;
  margin-bottom: 3.2vw;
  border-radius: 2.13vw;
}
.item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0 2.67vw 0 3.2vw;
}
.using-item {
  margin-bottom: 5.33vw;
}
</style>